<template>
    <div class="info-collect">
        <Crumb name="Purchase Request Approval"></Crumb>
        <div class="content">
            <Search>
                <el-input
                        v-model="key"
                        size="small"
                        class="input"
                        placeholder="Search By Request No"
                        prefix-icon="el-icon-search"
                />
                <el-button
                        size="small"
                        type="primary"
                >Search
                </el-button>
            </Search>
            <div class="table-wrapper">
                <el-table
                        :data="submitList"
                        @expand-change="getDetail"
                        border
                        row-key="id"
                        stripe
                        style="width: 100%">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-table  :data="props.row.partList" border>
                                   <el-table-column
                                           prop="partsNumber"
                                           label="Part No"
                                           width="180">
                                   </el-table-column>
                                   <el-table-column
                                           prop="denomination"
                                           label="Description"
                                   >
                                   </el-table-column>
                                   <el-table-column
                                           prop="quantity"
                                           label="Qty"
                                   >
                                   </el-table-column>

                                   <el-table-column
                                           prop="stockQuantity"
                                           label="stock remaining"
                                           width="150">
                                   </el-table-column>
                               </el-table>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="requestNo"
                            label="Request No"
                            width="180"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="requestDate"
                            label="requestDate"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="requestBy"
                            label="Request By"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="purpose"
                            label="purpose"
                            width="150"
                    >
                    </el-table-column>
                    <el-table-column label="Opr">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="openEdit(scope.row)">My suggestion
                            </el-button>

                        </template>
                    </el-table-column>
                </el-table>

                <div class="page">
                    <el-pagination background
                                   :page-size="pageSize"
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"/>
                </div>
            </div>

            <div class="modal-wrapper">
                <el-dialog
                        title="Suggestion"
                        :visible.sync="dialogVisible"
                        width="80%"
                >

                    <el-form :model="ruleForm" ref="ruleForm" label-width="200px" class="demo-ruleForm">

                        <el-form-item label="Reason" prop="detail">
                            <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 4, maxRows: 8}"
                                    v-model="ruleForm.reason"/>
                        </el-form-item>
                    </el-form>


                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">Reject</el-button>
                        <el-button type="primary" @click="submitForm">Approve</el-button>
                    </span>
                </el-dialog>
            </div>

        </div>
    </div>
</template>

<script>
    import Crumb from '@/components/common/crumb'
    import Search from '@/components/common/search'
    import {ERROR_OK} from "../../util/config";
    import mixins from "../../util/mixins"
    import {getSubmitedRequestList,getPartPurchaseRequestDetail,comfirmPurchaseQuest} from "../../api/purchase";

    export default {
        name: "purchase-approve",
        mixins:[mixins],
        data() {
            return {
                list: [
                ],
                ruleForm: {
                    reason: ''
                },
                key: '',
                dialogVisible: false
            }
        },
        computed:{
            submitList(){
                return this.list.filter(item=>item.requestNo.indexOf(this.key)>-1).slice((this.pageNum-1)*this.pageSize,this.pageNum*this.pageSize)
            }
        },
        created(){
            this._getSubmitList()
        },
        methods: {
            async submitForm() {
                let {status} = await comfirmPurchaseQuest({id:this.id})
                if(status === ERROR_OK ) {
                    this.$message({
                        message:'Request Approved',
                        type:'success'
                    })
                }
            },
            async getDetail(r){
                if(r.partList){
                    return
                } else {
                    let {status,data} = await getPartPurchaseRequestDetail(r.id);
                    if(status === ERROR_OK){
                        let partList = data.spareRequestDetailVoList.map(item=>{
                            return {
                                ...item.spareParts,quantity:item.quantity,stockQuantity:item.stockQuantity
                            }
                        });
                        r.partList = partList;
                        const index = this.list.findIndex(item=>item.id===r.id);
                        this.list.splice(index,1,r)
                        // this.$set(r,'partList',partList)
                    }
                }
            },
            clear() {
                this.reason = ''
            },
            openEdit(r) {
                this.id = r.id;
                this.dialogVisible = true
            },
            async _getSubmitList(){
                let {status,data} = await getSubmitedRequestList();
                if(status === ERROR_OK ) {
                    this.list = data;
                    this.total = data.length;
                }
            },
            changePage(page) {
                alert(page)
            }
        },
        components: {
            Crumb, Search
        }
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";
    .content {
        @include content
    }

    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>